<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{users}}
  </div>
  <!-- 
    action用法和mutation类似

    action中涉及的是异步操作
    action需要使用store.dispatch进行分发

    this.$store.dispatch('action名字', 数据)


    actions: {
      action名字 (context, payload) {
        进行异步请求
        context是一个和store一模一样的对象，payload就是dispatch时传递过来的数据

        context.commit('mutation')
      },
      action名字 ({commit}, payload) {
        commit('mutation')
      },
      action名字 ({commit, state}, payload) {
        // 在这里得到state的目的是，获取到state中的数据，但是不能修改
      }
    }
   -->
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>
  <script src="./axios.min.js"></script>
  <script>
    // const store = new Vuex.Store({
    //   state: {
    //     users: []
    //   },
    //   mutations: {
    //     setUsers (state, users) {
    //       state.users = users
    //     }
    //   },
    //   actions: {
    //     getUsers (context, page) {
    //       axios.get('http://localhost:3000/user/listpage?page=' + page).then(res => {
    //         // console.log(res.data)
    //         // 在action的请求结果中提交mutation
    //         // 因为context和$store是一致的，所以我们可以直接调用context的commit方法去提交mutation
    //         context.commit('setUsers', res.data)
    //       })
    //     }
    //   }
    // })

    // const app = new Vue({
    //   el: '#app',
    //   store,
    //   computed: {
    //     users () {
    //       return this.$store.state.users
    //     }
    //   },
    //   created () {
    //     // 在这里进行分发action
    //     this.$store.dispatch('getUsers', 2)
    //   }
    // })
  

      const store = new Vuex.Store({
        state:{
          users:[]
        },
        mutations:{
          setUsers(state,users){
            state.users =users
          }
        },
        actions:{
          getUsers(context,page){
            axios.get('http://user/listpage?'+page).then(res=>{
              context.commit('setUsers',res.data)
            })
          }
        }
      })
      const app = new Vue({
        el:'#app',
        store,
        computed:{
          users(state){
           return this.$store.state.users
          }
        },
        created (){
            this.$store.dispatch('getUsers',2)
        }
      })
  </script>
</body>
</html>